<template>
  <div class="search">
    <div @click="toIndex" class="logo">Two Shop</div>
    <div class="search-input">
      <el-input v-model="searchInput" class="input" placeholder="请输入要搜索的商品" clearable>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-button @click="search" slot="append">搜索</el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      searchInput: ""
    };
  },
  methods: {
    search() {
      this.$router.push({
        path: "Products",
        query: { name: this.searchInput }
      });
    },
    toIndex() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

<style scoped>
.search {
  display: flex;
  align-items: center;
  height: 120px;
  font-size: 0;
}

.logo {
  color: #409eff;
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  text-shadow: -4px 4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  width: 230px;
  margin-right: 20px;
}

.search-input > .input {
  width: 751px;
}

.search-input > button {
  height: 40px;
  width: 100px;
  border: none;
  outline: none;
  background-color: #409eff;
  position: relative;
  top: 1px;
  color: #fff;
}
</style>